import {Card, Col, DatePicker, Row, Statistic} from 'antd';
import type {FC} from 'react';
import { useEffect, useState} from 'react';
import { GridContent } from '@ant-design/pro-layout';
import {queryDefaultData} from './service';
import {Suspense} from "react";
import PageLoading from "@/pages/Analyse/components/PageLoading";
import ChartCard from "./components/ChartCard";
import dayjs from "dayjs";
import { ProCard } from '@ant-design/pro-card';
import type {TargetType} from "@/pages/Analyse/data";
import MonthlyChart from "@/pages/Analyse/components/Echarts/MonthlyChart";
import YearlyChart from "@/pages/Analyse/components/Echarts/YearlyChart";
import numeral from "numeral";
import ThisWeekChart from "@/pages/Analyse/components/Echarts/ThisWeekChart";
import IncomeTypePieChart from "@/pages/Analyse/components/Echarts/IncomeTypePieChart";
import YearPaymentPieChart from "@/pages/Analyse/components/Echarts/YearPaymentPieChart";
import MonthPaymentPieChart from "@/pages/Analyse/components/Echarts/MonthPaymentPieChart";
import MonthFamilyPaymentPieChart from "@/pages/Analyse/components/Echarts/MonthFamilyPaymentPieChart";
import YearFamilyPaymentPieChart from "@/pages/Analyse/components/Echarts/YearFamilyPaymentPieChart";
import MonthIncomeTypePieChart from "@/pages/Analyse/components/Echarts/MonthIncomeTypePieChart";


const Monitor: FC = () => {
  // 日期格式化
  const monthFormatStr = 'YYYY年MM月';
  const monthFormat = 'YYYY-MM';
  const yearFormat = 'YYYY';

  // 月份选择
  const [monthStr, setMonthStr] = useState<string>(dayjs(`${new Date()}`).format(monthFormatStr))
  const [month, setMonth] = useState<string>(dayjs(`${new Date()}`).format(monthFormat))

  // 年份选择
  const [year, setYear] = useState<string>(dayjs(`${new Date()}`).format(yearFormat))

  const [data, setData] = useState<TargetType>({
    topCard: {
      totalIncome: 0,
      totalPayment: 0,
      totalOwe: 0,
      totalLend : 0,
    },
    thisWeek: {
      totalIncome: 0,
      totalPayment: 0,
    },
    thisMonth: {
      totalIncome: 0,
      totalPayment: 0,
    },
  })

  // 根据年份获取后端数据
  useEffect(()=>{
    queryDefaultData({year: year}).then((res) => {
      if (res.status === "done") {
        setData(res.data)
      }
    });
  }, [year])

  const topColResponsiveProps = {
    xs: 12,
    sm: 6,
    md: 6,
    lg: 6,
    xl: 6,
  };

  return (
    <GridContent style={{marginTop: 15}}>
      <>
        <Suspense fallback={<PageLoading />}>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}
               style={{
                 marginBottom: 15,
                 marginRight: 20,
                 marginLeft: 20,
                 position: "fixed",
                 top: 50,
                 width: `calc(100vw - 40px)`,
                 zIndex: 9999,
                 backgroundColor: "white"
          }}
          >
            <Row>
              <>
                <DatePicker
                  style={{borderColor: "red", width: `100%`}}
                  // @ts-ignore
                  value={dayjs(year, yearFormat)}
                  format={yearFormat}
                  picker={"year"}
                  onChange={(value)=>{
                    if (value) {
                      setYear(dayjs(value.toString()).format("YYYY"))
                    }
                  }}
                />
              </>
            </Row>
          </Col>
          <div style={{height: 72}}/>
          <Row gutter={24} style={{backgroundColor:"#f5f5f5"}}>
            <Col {...topColResponsiveProps}>
              <ChartCard
                style={{backgroundColor:"#f5f5f5"}}
                bordered={false}
                title="年度总收入"
                total={`¥ ${numeral(data.topCard?.totalIncome || 0).format('0,0.00')}`}
                contentHeight={46}
              >
              </ChartCard>
            </Col>

            <Col {...topColResponsiveProps}>
              <ChartCard
                style={{color: "green", backgroundColor:"#f5f5f5"}}
                bordered={false}
                title="年度总支出"
                total={`¥ ${numeral(data.topCard.totalPayment || 0).format('0,0.00')}`}
                contentHeight={46}
              >
              </ChartCard>
            </Col>
            <Col {...topColResponsiveProps}>
              <ChartCard
                bordered={false}
                title="欠别人的钱"
                total={`¥ ${numeral(data.topCard.totalOwe || 0).format('0,0.00')}`}
                contentHeight={46}
                style={{color: "green", backgroundColor:"#f5f5f5"}}
              >
              </ChartCard>
            </Col>
            <Col {...topColResponsiveProps}>
              <ChartCard
                bordered={false}
                style={{backgroundColor:"#f5f5f5"}}
                title="借出去的钱"
                total={`¥ ${numeral(data.topCard.totalLend || 0).format('0,0.00')}`}
                contentHeight={46}
              >
              </ChartCard>
            </Col>
          </Row>
        </Suspense>
        <Row gutter={24} style={{marginTop: 5}}>
          <Col xl={16} lg={24} md={24} sm={24} xs={24}>
            <Card
              title="本周收支"
              bordered={false}
              style={{ marginBottom: 24,height: 300 }}
              headStyle={{backgroundColor: "#91d5ff", borderRadius: 25}}
            >
              <ThisWeekChart/>
            </Card>
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <Card
              headStyle={{color: "blue", borderRadius: 25}}
              title="小计"
              bordered={false}
              style={{height: 300 }}
            >
              <ProCard.Group direction={'row'} style={{marginBottom: 5}}>
                <ProCard>
                  <Statistic
                    valueStyle={{color: "red"}}
                    title="本周收入合计"
                    value={data.thisWeek.totalIncome}
                    precision={2}
                  />
                </ProCard>
                <ProCard>
                  <Statistic
                    valueStyle={{color: "green"}}
                    title="本周支出合计"
                    value={data.thisWeek.totalPayment}
                    precision={2}
                  />
                </ProCard>
              </ProCard.Group>
                <ProCard.Group direction={'row'}>
                <ProCard>
                  <Statistic
                    valueStyle={{color: "red"}}
                    title="本月收入合计"
                    value={data.thisMonth.totalIncome}
                    precision={2}
                  />
                </ProCard>
                <ProCard>
                  <Statistic
                    valueStyle={{color: "green"}}
                    title="本月支出合计"
                    value={data.thisMonth.totalPayment}
                    precision={2}
                  />
                </ProCard>
              </ProCard.Group>
            </Card>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              headStyle={{color: "green", backgroundColor: "#91d5ff", borderRadius: 25}}
              title={`${monthStr} 分类支出`}
              bordered={false}
              style={{ marginBottom: 24, height: 450 }}
            >
              <MonthPaymentPieChart month={month}/>
            </Card>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              headStyle={{color: "green", backgroundColor: "#91d5ff", borderRadius: 25}}
              title={`${monthStr} 成员支出`}
              bordered={false}
              style={{ marginBottom: 24, height: 350 }}
            >
              <MonthFamilyPaymentPieChart month={month}/>
            </Card>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              headStyle={{color: "red", backgroundColor: "#91d5ff", borderRadius: 25}}
              title={`${monthStr} 收入`}
              bordered={false}
              style={{ marginBottom: 24, height: 350 }}
            >
              <MonthIncomeTypePieChart month={month}/>
            </Card>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              headStyle={{color: "green", backgroundColor: "#91d5ff", borderRadius: 25}}
              title={`${year}年 分类支出`}
              bordered={false}
              style={{ marginBottom: 24, height: 450 }}
            >
              <YearPaymentPieChart year={year}/>
            </Card>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              headStyle={{color: "green", backgroundColor: "#91d5ff", borderRadius: 25}}
              title={`${year}年 成员支出`}
              bordered={false}
              style={{ marginBottom: 24, height: 350 }}
            >
              <YearFamilyPaymentPieChart year={year}/>
            </Card>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              headStyle={{color: "red", backgroundColor: "#91d5ff", borderRadius: 25}}
              title={`${year} 年收入`}
              bordered={false}
              style={{ marginBottom: 24, height: 350 }}
            >
              <IncomeTypePieChart year={year}/>
            </Card>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <Card
              title={`${monthStr} 收支`}
              bordered={false}
              headStyle={{backgroundColor: "#91d5ff", borderRadius: 30}}
              style={{ marginBottom: 24, height: 350 }}
              extra={
                <DatePicker
                  style={{borderRadius: 30}}
                  picker={"month"}
                  // @ts-ignore
                  value={dayjs(month, monthFormatStr)}
                  format={monthFormatStr}
                  onChange={(value)=> {
                    if(value){
                      setMonthStr(dayjs(value.toString()).format(monthFormatStr))
                      setMonth(dayjs(value.toString()).format(monthFormat))
                    }
                  }}
                />
              }
            >
              <MonthlyChart month={month}/>
            </Card>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <Card
              title={`${year} 年度收支`}
              headStyle={{backgroundColor: "#91d5ff", borderRadius: 30}}
              bordered={false}
              style={{ marginBottom: 24, height: 350 }}
              extra={
                <DatePicker
                  style={{borderRadius: 30}}
                  picker={"year"}
                  // @ts-ignore
                  value={dayjs(year, 'YYYY')}
                  onChange={((value)=> {
                    if (value) {
                    setYear(dayjs(value.toString()).format("YYYY"))
                    }
                  })}
                />
              }
            >
              <YearlyChart year={year}/>
            </Card>
          </Col>
        </Row>
      </>
    </GridContent>
  );
};

export default Monitor;
